import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
import "./App.scss";
import Layout from "@/components/Layout"; //布局组件
import ROUTES from "@/constants/routes"; // 路由名称对象
import { Suspense, lazy, useMemo, useReducer } from "react";
import playMusicReducer, {
  initialState,
  AudioContext,
  playMusicDispatchContext,
  PlayMusicStateContext,
} from "@/reducers/playMusic"; // usereducer 配合 usecontext 完成全局的播放数据管理

const delay = (time: number) => {
  return new Promise((resolve) => {
    setTimeout(resolve, time);
  });
};

const Start = lazy(() => import("@/components/Start"));
const Login = lazy(() => import("@/view/login"));
// const Discovery = lazy(() => import("@/view/discover"));
const Discovery = lazy(() => delay(1000).then(() => import("@/view/discover")));
const Playlist = lazy(() => import("@/view/playlist"));
const Song = lazy(() => import("@/view/song"));
const Search = lazy(() => import("@/view/search"));
const SearchDeatil = lazy(() => import("@/view/searchdetail"));
const SongComment = lazy(() => import("@/view/songcomment"));
const User = lazy(() => import("@/view/user"));
import useAudio from "./hooks/useAudio"; // 创建播放
const App = () => {
  const [state, dispatch] = useReducer(playMusicReducer, initialState);
  const { musicUrl, autoPlay } = state;
  const [
    audio,
    audioState,
    audioControls,
    audioRef,
    playState,
    duration,
    currentTime,
  ] = useAudio({
    src: musicUrl,
    autoPlay: autoPlay,
    onEnded: () => playNextMusic(),
    onError: () => playNextMusic(),
  });
  const playNextMusic = () => {};
  const audioInfo = useMemo(() => {
    return {
      audio,
      state: audioState,
      controls: audioControls,
      ref: audioRef,
      playState: playState,
      duration: duration,
      currentTime: currentTime,
    };
  }, [
    audio,
    audioState,
    audioControls,
    audioRef,
    playState,
    duration,
    currentTime,
  ]);

  return (
    <BrowserRouter>
      <playMusicDispatchContext.Provider value={dispatch}>
        <PlayMusicStateContext.Provider value={state}>
          <AudioContext.Provider value={audioInfo}>
            <Layout>
              {audio}
              <Suspense fallback={<Start />}>
                <Routes>
                  <Route
                    path={ROUTES.ROOT}
                    element={<Navigate to={ROUTES.DISCOVERY} />}
                  ></Route>
                  <Route
                    path={ROUTES.DISCOVERY}
                    element={<Discovery />}
                  ></Route>
                  <Route path={ROUTES.PLAYLIST} element={<Playlist />}></Route>
                  <Route path={ROUTES.SONG} element={<Song />}></Route>
                  <Route path={ROUTES.SEARCH} element={<Search />}></Route>
                  <Route path={ROUTES.LOGIN} element={<Login />}></Route>
                  <Route path={ROUTES.USER} element={<User />}></Route>
                  <Route
                    path={ROUTES.SONGCOMMENT}
                    element={<SongComment />}
                  ></Route>
                  <Route
                    path={ROUTES.SEARCHDETAIL}
                    element={<SearchDeatil />}
                  ></Route>
                </Routes>
              </Suspense>
            </Layout>
          </AudioContext.Provider>
        </PlayMusicStateContext.Provider>
      </playMusicDispatchContext.Provider>
    </BrowserRouter>
  );
};

export default App;
